<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-stepper v-model="n1"></pure-stepper>
			</pj-demo>

			<!-- 设置最大/最小值 -->
			<pj-demo title="设置最大/最小值">
				<pure-stepper
					v-model="n2"
					:min="-5"
					:max="5"
				></pure-stepper>
			</pj-demo>

			<!-- 步长 -->
			<pj-demo title="步长">
				<pure-flex direction="column">
					<pure-stepper
						v-model="n3"
						:step="2"
					></pure-stepper>
					<pure-stepper
						v-model="n4"
						:step="0.5"
					></pure-stepper>
				</pure-flex>
			</pj-demo>

			<!-- 可长按加减 -->
			<pj-demo title="可长按加减">
				<pure-stepper
					v-model="n5"
					longpress
				></pure-stepper>
			</pj-demo>

			<!-- 禁用状态 -->
			<pj-demo title="禁用状态">
				<pure-stepper
					v-model="n1"
					disabled
				></pure-stepper>
			</pj-demo>

			<!-- 只读状态 -->
			<pj-demo title="只读状态">
				<pure-stepper
					v-model="n1"
					readonly
				></pure-stepper>
			</pj-demo>

			<!-- 异步更新 -->
			<pj-demo title="异步更新">
				<pure-stepper
					v-model="n6"
					async
					@onPlus="handlePlus"
					@onMinus="handleMinus"
				></pure-stepper>
			</pj-demo>

			<!-- 不显示按钮 -->
			<pj-demo title="不显示按钮">
				<pure-stepper
					v-model="n6"
					:minus="false"
					:plus="false"
				></pure-stepper>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { onLoad, onReady, onShow } from "@dcloudio/uni-app";

	const n1 = ref();
	const n2 = ref(0);
	const n3 = ref(0);
	const n4 = ref(0);
	const n5 = ref(0);
	const n6 = ref(0);

	// 异步加
	function handlePlus() {
		uni.showLoading({
			mask: true
		});
		setTimeout(() => {
			n6.value++;
			uni.hideLoading();
		}, 2500);
	}

	// 异步减
	function handleMinus() {
		uni.showLoading({
			mask: true
		});
		setTimeout(() => {
			n6.value--;
			uni.hideLoading();
		}, 2500);
	}
</script>

<style lang="scss" scoped>
	.page {
	}
</style>
